@import '../../styles/var.scss';

.my-select-button {
  display: flex;
  .item {
    padding: 6px 16px;
    font-family: PingFangSC-Regular;
    font-size: $font-size-small;
    color: $text-color-base;
    letter-spacing: 0;
    line-height: 32px;
    font-weight: 400;

    border: 2px solid $border-color-base;
    border-left-width: 0;
    border-right-width: 2px;
    transition: all 0.2s;
    &:first-child {
      border-left-width: 2px;
    }

    &:last-child {
      border-right-width: 2px;
    }
  }

  .item-active {
    color: $color-primary;
    border-color: $color-primary;
    z-index: 2;
    background: $background-color-base;
    border-left-width: 2px;
  }
  .item-first {
    border-radius: 12px 0 0 12px;
  }
  .item-last {
    border-radius: 0 12px 12px 0;
  }
  .item-prev-active {
    border-right-width: 0;
  }

  .item-next-active {
    border-left-width: 0;
  }
}
